<template>
    <!--中间布局--> 
  <div class="wrapper activities"> 
   <div class="activity-card-list"> 
    <div class="top-title"> 
     <h4 class="latest">活动</h4>      
     <div class="clearfix"></div> 
    </div> 
    <div class="activity-list" v-infinite-scroll="loadMore"> 
     <ul class="activity"> 

      <li class="activity-item" v-for="(e,i) in list" :key="i"> 
        <spen class="activity-inner"> 
            <a href="http://"></a> 
            <div class="img">
            <!-- <a href="./activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a> -->

            <router-link  :to="'/gathering/item/'+e.id"> <img width="280px" height="280px" :src="e.image"></router-link>

            </div> 
            <div class="text"> 
            <p class="title">{{e.name}}</p> 
            <div class="fl goin"> 
            <p>时间：{{e.starttime}}</p> 
            <p>城市：{{e.city}}</p> 
            </div> 
            <div class="fr btn"> 
            <span class="sui-btn btn-bao"><router-link  :to="'/gathering/item/'+e.id" style="text-decoration:none;color:#ffffff"> 立即报名</router-link></span> 
            </div> 
            <div class="clearfix"></div> 
            </div> 
        </spen> 
       </li> 
     
     </ul> 
    </div> 
   </div> 
  </div> 
  
</template>

<script>
import '@/assets/css/page-sj-activity-index.css'
import gatheringApi from '@/api/gathering' 
export default {
    //在服务器端执行的方法
    asyncData(){
        return gatheringApi.search(1,12,{state:'1'}).then(res=>{
            return {
                list:res.data.data.rows
            }
        })
       
    },
    data(){
        return {
            pageNo:1,
            pageSize:12,
            searchMap: {state:'1'} 
        }
    },
    methods:{
        //瀑布流触发的方法
       loadMore(){
          console.log("111")
          gatheringApi.search(++this.pageNo,this.pageSize,this.searchMap).then(res=>{
            
                this.list =  this.list.concat(res.data.data.rows);
            
           })

       }
    }
}
</script>